<template>
  <div class="statistics-content statistics-1">
    <div class="grid grid-left">
<!--      <div class="statistics-block">-->
<!--        <BlockItem  class="max" title="用户使用频率分析"></BlockItem>-->
<!--      <div class="img-top">-->
<!--        <div class="img-block">-->
<!--            <div class="modal-title">{{countList[0]*3}}</div>-->
<!--            <div class="modal-title2">今天</div>-->
<!--        </div>-->
<!--        <div class="img-block">-->
<!--          <div class="modal-title">{{countList[1]*3}}</div>-->
<!--          <div class="modal-title2">三天</div>-->
<!--        </div>-->
<!--        <div class="img-block">-->
<!--          <div class="modal-title">{{countList[2]*3}}</div>-->
<!--          <div class="modal-title2">七天</div>-->
<!--        </div>-->
<!--      </div>-->
<!--        <div class="img-top" style="justify-content: center">-->
<!--          <div class="img-block">-->
<!--            <div class="modal-title">{{countList[3]*3}}</div>-->
<!--            <div class="modal-title2">15天</div>-->
<!--          </div>-->
<!--          <div class="img-block">-->
<!--            <div class="modal-title">{{countList[4]*3}}</div>-->
<!--            <div class="modal-title2">一个月</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="statistics-block">
        <BlockItem  class="max" title="用户使用频率分析"></BlockItem>
        <div class="img-top">
          <div class="img-block">
            <div class="modal-title">3</div>
            <div class="modal-title2">今天</div>
          </div>
          <div class="img-block">
            <div class="modal-title">233</div>
            <div class="modal-title2">三天</div>
          </div>
          <div class="img-block">
            <div class="modal-title">563</div>
            <div class="modal-title2">七天</div>
          </div>
        </div>
        <div class="img-top" style="justify-content: center">
          <div class="img-block">
            <div class="modal-title">1230</div>
            <div class="modal-title2">15天</div>
          </div>
          <div class="img-block">
            <div class="modal-title">3137</div>
            <div class="modal-title2">一个月</div>
          </div>
        </div>
      </div>
      <div class="statistics-block1">
        <BlockItem class="max" title="用户来源分析"></BlockItem>
        <div class="chart" id="chart2"></div>
      </div>
      <div class="statistics-block2">
        <BlockItem class="max" title="各模块点击量"></BlockItem>
        <div class="chart" id="chart4"></div>
      </div>
    </div>
    <div class="grid grid-center">
      <div class="map-block" style="position: relative">
        <div class="number-block" style="position: relative;z-index: 1">
          <NumberItem class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :icon="item.icon">
          </NumberItem>
        </div>
        <div id="map"></div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="用户登录时间、频率统计"></BlockItem>
        <div class="chart" id="chart3"></div>
      </div>
    </div>
    <div class="grid grid-right">
      <div class="statistics-block" style="height: calc(31% - 10px);">
        <BlockItem class="max" title="近一月个人注册流程质量分析"></BlockItem>
        <div class="circle-block">
          <div class="circle-list" v-for="(item) in list" :key="item.id">
            <el-progress type="circle" :show-text="false" :percentage="item.percentage" :stroke-width="8" :color="item.color" class="progress" width="105" :define-back-color="item.bgColor"></el-progress>
            <div class="textCenter">
              <div class="text">{{item.count}}
                <div class="txt">人</div>
              </div>
            </div>
            <div class="text-type">{{item.type}}</div>
          </div>
        </div>
      </div>
      <div class="statistics-block" style="height: calc(31% - 10px);">
        <BlockItem class="max" title="近一月企业注册流程质量分析"></BlockItem>
        <div class="circle-block">
          <div class="circle-list" v-for="(item) in qylist" :key="item.id">
            <el-progress type="circle" :show-text="false" :percentage="item.percentage" :stroke-width="8" :color="item.color" class="progress" width="105" :define-back-color="item.bgColor"></el-progress>
            <div class="textCenter">
              <div class="text">{{item.count}}
                <div class="txt">个</div>
              </div>
            </div>
            <div class="text-type">{{item.type}}</div>
          </div>
        </div>
      </div>
      <div class="statistics-block" style="height: calc(40% - 20px);">
        <BlockItem  class="max" title="用户反馈意见TOP5"></BlockItem>
        <div class="rank-block">
          <div class="rank-item head">
            <div class="col-item rank">排名</div>
            <div class="col-item name">反馈意见</div>
            <div class="col-item count">数量</div>
          </div>
          <div v-for="(item,index) in unitRank" :key="item.index">
            <div class="rank-item body" :style="index%2==0?'background-color: #16205F':''">
              <div class="col-item rank" >{{index+1}}</div>
              <div class="col-item name">{{item.name}}</div>
              <div class="col-item count">{{item.value}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Modal v-if="showMore" @closeModal="showMore=false" :title="title" :name="this.name" width="1200px" height="400px">
      <MapCount1 :title="title"></MapCount1>
    </Modal>
  </div>
</template>

<script>
import NumberItem from "@/components/NumbeItem/NumberItem.vue";
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import Modal from "@/components/Modal/Modal";
import MapCount1 from "@/components/MapCount/MapCount1";
import CoverTwo from "@/components/Cover/CoverTwo";
import {getComQualityCountApi, getCustomerQualityCountApi, getFrequencyCountApi} from "@/api/statistics-7";

export default {
  name: "Statistics1",
  components: {NumberItem,BlockItem,Modal,MapCount1,CoverTwo},
  data(){
    return{
      fairActive:1,
      title:'',
      moreType:1,
      showMore:false,
      chart1Active:1,
      chart2Active:1,
      chart3Active:1,
      chart4Active:1,
      chart5Active:1,
      countList:[],
      numberData:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'小程序访问量',icon:'icon-caishouzhongliang',number:67},
        // {id:3,color:['#30cbf7','#1997e1'],name:'触摸屏使用次数',icon:'icon-caishouzhongliang',number:32},
        {id:4,color:['#12f1b8','#0db5e6'],name:'技术支持拨打次数',icon:'icon-caishouzhongliang',number:5},
        // {id:5,color:['#f7c759','#fb838f'],name:'PC端访问次数',icon:'icon-huoche',number:56},
        {id:6,color:['#A37EFC','#8354FB'],name:'转发次数',icon:'icon-huoche',number:25},
      ],
      list:[{id:1,percentage:19,count:15,type:'完成注册用户数',color:'#0FC779',bgColor:'#053D3B'},
        {id:2,percentage:38,count:3,type:'注册个人信息环节留存',color:'#1AC9FF',bgColor:'#073752'},
        {id:3,percentage:43,count:8,type:'填写简历留存',color:'#F45D41',bgColor:'#33222C'}],
      qylist:[{id:1,percentage:19,count:10,type:'完成注册企业数',color:'#0FC779',bgColor:'#053D3B'},
        {id:2,percentage:38,count:2,type:'注册企业信息环节留存',color:'#1AC9FF',bgColor:'#073752'},
        {id:3,percentage:43,count:21,type:'发布岗位信息留存',color:'#F45D41',bgColor:'#33222C'}],
      comList:[{id:1,percentage:40,count:10,type:'完成注册企业数',color:'#0FC779',bgColor:'#053D3B'},
        {id:2,percentage:50,count:2,type:'注册企业信息环节留存',color:'#1AC9FF',bgColor:'#073752'},
        {id:3,percentage:60,count:21,type:'发布岗位信息留存',color:'#F45D41',bgColor:'#33222C'}],
      unitRank:[{id:1,name:'发布岗位质量差',value:21},
        {id:1,name:'电话无人接听',value:21},
        {id: 1, name: '人力资源服务质量差', value: 16},
        {id:1,name:'发送消息无人回复',value:13},
        {id:1,name:'没有匹配岗位',value:5},],
    }
  },
  methods: {
    getCount(){
      getFrequencyCountApi().then((res)=>{
        if(res.code===200){
          this.countList=res.data
        }
      })
    },
    getList(){
      getComQualityCountApi().then((res)=>{
        if(res.code===200){
          this.qylist[0].count=res.data[0]
          this.qylist[1].count=res.data[1]
          this.qylist[2].count=res.data[2]

        }
      })
    },
    getQylist(){
      getCustomerQualityCountApi().then((res)=>{
        if(res.code===200){
          this.list[0].count=res.data[0]
          this.list[1].count=res.data[1]
          this.list[2].count=res.data[2]

        }
      })
    },
    initChart2(){
      let charts = this.$echarts.init(document.getElementById('chart2'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        xAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff'
            }
          },
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:5,
          left:80,
          right:30,
          bottom:60
        },
        yAxis: {
          type: 'category',
          data: ['微信搜索','分享转发','朋友圈广告','扫码'],
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
          axisTick:{
            show:false
          }
        },
        series: [
          {
            name:'人数',
            data: [27, 35, 90, 67],
            type: 'bar',
            barWidth:13,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'right',
                  textStyle:{
                    color:'#fff',
                    fontSize:14
                  },
                },
                barBorderRadius:[15, 15, 15, 15],
                color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
                  offset:0,
                  color:'#00D1F5'
                },{
                  offset:1,
                  color:'#2194FE'
                }])
              }
            }
          }
        ]
      }
      // charts.on('click',(e)=>{
      //   if(e.componentSubType==='bar'){
      //     this.moreType=1;
      //     this.showMore=true;
      //   }
      // })
      charts.hideLoading();
      charts.setOption(option)
    },
    initChart3(){
      let charts = this.$echarts.init(document.getElementById('chart3'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        legend:{
          textStyle:{
            color:'#fff'
          },
          right:10,
          top:0
        },
        xAxis: {
          type: 'category',
          data: ["09-14","09-15","09-16","09-17","09-18","09-19","09-20","09-21",],
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
            }
          },
          axisTick:{
            show:false
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:20,
          left:60,
          right:10,
          bottom:60
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine:{
            show:true,
          },
          axisTick:{
            show:true,
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            // data: getNum(12,3000,2500),
            data:[280,164,335,410,270,214,358,256],
            type: 'line',
            name:'微信小程序',
            smooth:true,
            showSymbol:false,
            symbol: 'circle',
            size: 10,
            color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
              offset:0,
              color:'#0EB4FF'
            },{
              offset:1,
              color:'#00D1F5'
            }])
          },
          // {
          //   data:[425,698,125,852,1025,952,936,582,482,635,874,721,963,1208,1480],
          //   name:'PC端',
          //   type: 'line',
          //   showSymbol:false,
          //   symbol: 'circle',
          //   smooth:true,
          //   color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
          //     offset:0,
          //     color:'#FDE289'
          //   },{
          //     offset:1,
          //     color:'#D84977'
          //   }])
          // }
        ]
      }
      // getCusUseFrequencyApi().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     delete data[0]
      //     data.forEach(item=>{
      //        option.series[0].data.push(item.countValue)
      //        option.xAxis.data.push(item.countKey)
      //     })
          charts.hideLoading();
          charts.setOption(option)
      //   }
      // })
    },

    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/adq_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          // visualMap: {
          //   left: 'right',
          //   top: 'bottom',
          //   max:1000,
          //   inRange: {
          //     color: [
          //       'rgba(17,74,112,0.2)',
          //       '#46a9ff',
          //     ]
          //   },
          //   textStyle: {
          //     color: "#fff"
          //   },
          //   calculable: true
          // },
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series:[
            {
              map: "jqsMap",
              center:[104.62577,35.579764],
              zoom:1.3,
              type:'map',
              top:130,
              data:[],
              label: {
                show: true,
                fontSize: "12",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "12",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select:{
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "12",
                  color: "#fff"
                }
              }
            }
          ]
        }
        myCharts.on('click',(e)=>{
          if(e.componentSubType=='map'){
            this.title=e.data.name
            this.moreType=2;
            this.showMore=true;
          }
        })
        myCharts.setOption(option)
      })
    },
    initChart4(){
      let myCharts = this.$echarts.init(document.getElementById('chart4'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#2fc9f6','#FDB939','#5961F9','#42efa7','#FF7F63'],
        legend: {
          orient: 'vertical',
          right: 60,
          top: 5,
          itemWidth: 10,
          itemHeight: 10,
          itemGap:15,
          textStyle: {
            color: "#fff"
          },
        },

        series: [
          {
            type: 'pie',
            radius: '70%',
            center: ['35%', '40%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                // fontSize: 20,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 47, name: '求职招聘点击量' },
              { value: 53, name: '零工市场点击量' },
              { value: 90, name: '政策咨询点击量' },
              { value: 21, name: '技能培训点击量' },
              { value: 74, name: '帮帮我' }
            ]
          }
        ]
      };
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.initMap();
    this.initChart2()
    this.initChart3()
    this.initChart4()
    // this.getCount();
    // this.getList()
    // this.getQylist()
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 1px solid #46a9ff;
.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 155px);
  padding: 0 30px;
  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: 2px solid #05548A;
    background-color: #0A1456;
    border-radius: 10px;
    .img-top{
      display: flex;
      .img-block{
        width: 140px;
        height: 140px;
        color: #fff;
        background: url("/static/header/u1192.png") no-repeat center;
        margin: 3px 6px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        background-size: 100%;
        .modal-title{
          color: #fff;
          text-align: center;
          font-size: 25px;
          font-weight: bold;
        }
        .modal-title2{
          text-align: center;
          color: #fff;
          font-size: 12px;
        }
      }

    }
    .tab-block{
      position: absolute;
      top: 17px;
      right: 20px;
      display: flex;
      align-items: center;
      height: 30px;
      z-index: 9999;
      .tab:first-child{
        border-radius: 5px 0 0 5px;
      }
      .tab:last-child{
        border-radius: 0 5px 5px 0;
      }
      .tab{
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #46a9ff;
        font-size: 14px;

      }
      .tab.active{
        background: #46a9ff;
      }
    }
    .circle-block{
      display: flex;
      width: 100%;
      height: calc(100% - 50px);
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      .circle-list{
        height: calc(100% - 10px);
        position: relative;
        text-align: center;
        margin: auto;
        .textCenter {
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .text {
            font-size: 22px;
            color: #50FFC1;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            .txt{
              font-size: 18px;
              color: #ffffff;
            }
          }
          span {
            font-size: 14px;
            color: #ffffff;
          }
        }
        .text-type{
          color: #ffffff;
          font-size: 12px;
          width: 100px;
        }
      }
    }
    .rank-block{
      display: flex;
      flex-direction: column;
      padding-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .rank-item{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .col-item{
          display: flex;
          align-items: center;
          color: #fff;
          padding: 0 5px;
        }
        .col-item.rank{
          width: 50px;
          justify-content: center;
        }
        .col-item.name{
          width: calc(100% - 150px);
          margin-left: 20px;
          justify-content: flex-start;
          display: block;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .col-item.count{
          width:100px;
          justify-content: center;
          font-size: 14px;
        }
      }
      .rank-item.head{
        height: 40px;
        /* margin-bottom: 5px; */
        background-color: #232C67;
        .col-item{
          justify-content: center;
          font-size: 16px;
        }
        .col-item.name{
          justify-content: flex-start;
        }
      }
      .rank-item.body{
        height: 35px;
        margin-bottom: 10px;
        .col-item.rank.background{
          background: #F36838;
          margin: 0 12.5px;
          width: 25px;
          height: 25px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
      .rank-item.body:last-child{
        margin-bottom: 0;
      }
    }
  }
}

.statistics-content {
  display: flex;
  flex-direction: row;

  .grid {
    height: 100%;
  }

  .grid.grid-right {
    width: calc(100%/4);
    .statistics-block{
      width: 100%;
      height: calc(38% - 2px);
      margin-bottom: 12px;
      .chart{
        width: 100%;
        height: 100%;
      }
    }
  }
  .grid.grid-center{
    width: calc(100%/2);
    padding:0 20px;
    .statistics-block{
      width: 100%;
      height: calc(100%/3 - 20px);
      margin-top: 20px;
    }
  }
  .grid.grid-left{
    width: calc(100%/4);
    .statistics-block{
      width: 100%;
      height: calc(38% - 2px);
      margin-bottom: 10px;
      .chart{
        width: 100%;
        height: 100%;
      }
    }
    .statistics-block1{
      width: 100%;
      height: calc(34% - 2px);
      margin-bottom: 13px;
      padding: 10px;
      position: relative;
      border: 2px solid #05548A;
      background-color: #0A1456;
      border-radius: 10px;
      .chart{
        width: 100%;
        height: 100%;
      }
    }
    .statistics-block2{
      width: 100%;
      height: calc(26% - 2px);
      margin-bottom: 10px;
      padding: 10px;
      position: relative;
      border: 2px solid #05548A;
      background-color: #0A1456;
      border-radius: 10px;
      .chart{
        width: 100%;
        height: 100%;
      }
    }
    .statistics-block:last-child{
      margin-bottom: 0;
    }
  }

  .map-block{
    width: 100%;
    height: calc(100%/3*2);
    position: relative;
    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      .number-item{
        width: calc((100% - 90px)/4);
        margin-right: 30px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
